/**
 * @author Vladimir Kanubrikov
 */

$(function(){	
	window.location.hash = '#';
	checkLocation();
	$('#newPres').click(function(){
		checkLocation();
		$('#mainNav').html('<span class="presentation-main-navigation--item active">New Presentation</span>'
				+'<span class="presentation-main-navigation--item"><a id="editPres" href="#editPresentation">Edit Presentation</a></span>'
				+'<span class="presentation-main-navigation--item"><a id="viewPres" href="">View and edit Existing Presentation</a></span>'
				);
		new PresentationEditor();
	});
	$('#editPres').click(function(){	
		$('#mainNav').html('<span class="presentation-main-navigation--item"><a id="newPres" href="#newPresentation">New Presentation</a></span>'
				+'<span class="presentation-main-navigation--item active">Edit Presentation</span>'
				+'<span class="presentation-main-navigation--item"><a id="viewPres" href="">View and edit Existing Presentation</a></span>'
				);
		var uid = $('#presentationViewerScreen').attr('data-presentationname');
		var presentation = JSON.parse(localStorage.getItem(uid));
		new PresentationEditor(presentation);
	});
	
	$('#viewPres').click(function(){
		$('#mainNav').html('<span class="presentation-main-navigation--item"><a id="newPres" href="#newPresentation">New Presentation</a></span>'
				+'<span class="presentation-main-navigation--item"><a id="editPres" href="#editPresentation">Edit Presentation</a></span>'
				+'<span class="presentation-main-navigation--item active">View and edit Existing Presentation</span>'
		);
		PresentationViewer();
	});
	
	PresentationViewer();
	
});

var PresentationViewer = function(){
	var instance = this;
	instance.controls = {
		menu:	$('#presentationViewerMenu'),
		screen: $('#presentationViewerScreen')
	};
	instance.menu = "";
	instance.presentations = {};
	instance.presentation = {};
	instance.presentation.slides="";	
	
	for (var i in localStorage){
		var tmp = JSON.parse(localStorage[i]);
		instance.presentations[tmp.name] = tmp.slides;
		console.log(tmp.effect);
		instance.presentation[tmp.name] = {};
		instance.presentation[tmp.name].effect = tmp.effect; 
	}
	console.log(instance.presentations);
	for(var i in instance.presentations){
		instance.menu += "<button class='presentation-name-button' id='presentation_"+i+"'>"+i+"</button>"; 
	}
	
	
	setTimeout(function(){
		instance.controls.menu.html(instance.menu);
		
		$('.presentation-name-button').click(function(){
			instance.presentation.slides = "";
			var uid = $(this).attr('id').match(/\_(\S+)/)[1];
			console.log(uid);
			console.log(testttt = instance.presentations[uid]);
			for(var i in instance.presentations[uid]){
				instance.presentation.slides += '<div class="presentation-slide" id="ps'+i+'">'+instance.presentations[uid][i].content+'</div>';
			}
			//console.log(instance.presentation.slides);
			console.log(instance.controls.screen);
			instance.controls.screen.html(instance.presentation.slides);
			instance.controls.screen.attr('data-presentationname', uid);
			instance.controls.screen.cycle({ 
			    fx:      instance.presentation[uid].effect, 
			    next:   instance.controls.screen, 
			    timeout:  0 
			});
		});
	}, 0);	
	
};

function checkLocation(){
	window.addEventListener("hashchange", function(){
		 if(window.location.hash && window.location.hash=="#newPresentation" || window.location.hash=="#editPresentation"){
			 $('#presentationViewer').hide();
			 $('#newPresentationView').show();
		 }else{
			 $('#newPresentationView').hide();
			 $('#presentationViewer').show();
		 }
	 }, false);	
}

var Presentation = function(){
	var instance = this;
	instance.name = "";
	instance.slides = new Array();
	instance.effect = "";
	//console.log(instance.slides.length);
};

var PresentationEditor =  function(presentation){	
	var instance = this;	
	instance.presentation = presentation || new Presentation();
	console.log(instance.presentation);
	instance.controls = {
			newSlideBtn: $('#newSlide'),
			saveSlideBtn: $('#saveChanges'),
			delBtn: $('#deleteSlide'),
			saveBtn: $('#savePresentation'),
			menu: $('#presentationMenu'),
			newTextBtn: $('#newText'), 
			slideMenu: $('#slideMenu'),
			TextField: $('#textField'),
			imageField: $('#presentationImageInput'), 
			addText: $('#addText'), 
			compositTextElem: $('#compositTextField'),
			compositeImageField: $('#compositImageField'),
			slideTitleField: $('#slideTitle'),
			newPresetation: $('#newPresentationView'),
			presentationName:  $('#presentationName'),
			slidesList: $('#slidesList'),
			effect: $('#presentationEffect')
	};		
	if(instance.presentation.name){instance.controls.presentationName.val(instance.presentation.name); }
	if(instance.presentation.slides){
		instance.effect = instance.presentation.effect;
		instance.controls.effect.val(instance.presentation.effect);
		
		for(var i in instance.presentation.slides){
			instance.controls.slidesList.append('<button id="sb'+i+'" class="slides-list-button">'+instance.presentation.slides[i].title+'</button>');
			var temp = $(document.createElement('div')).attr('class','presentation-slide').attr('id', "ps"+i)
			.html(instance.presentation.slides[i].content).hide();
			instance.controls.newPresetation.append(temp);
		}
		
		$('.slides-list-button').click(function(){
			instance.controls.newSlideBtn.click();
			
			$('.presentation-slide').hide();
			var uid = $(this).attr('id').match(/\d+/);
			instance.uid = uid;
			console.log(uid);
			instance.temp.view = $('#ps'+uid);
			console.log(instance.temp.view);
			instance.controls.slideTitleField.val(instance.presentation.slides[uid].title);
			instance.temp.view.show();
			instance.temp.view.click(function(){
				$(this).attr('contenteditable','true');
			});
			instance.controls.slideMenu.show();
			
			instance.delSlide = function(){
				var uid = instance.temp.view.attr('id').match(/\d+/);
				instance.presentation.slides.splice(uid,1);
				instance.temp.view.remove();
				$('#sb'+uid).remove();				
			};
		});
	}
	
	instance.Slide = function(){
		var instance = this;
		instance.title = "";
		instance.content = "";			
	};	
	
	instance.controls.effect.change(function(){
		instance.effect = $(this).val();
		instance.presentation.effect = instance.effect;
	});
	
	instance.savePresentation = function(){	
		var instance = this;
		instance.presentation.effect = instance.effect;
		instance.presentation.name = instance.controls.presentationName.val();
		//$.post('service.php',JSON.stringify(instance.presentation));
		localStorage.setItem(instance.presentation.name, JSON.stringify(instance.presentation));
		setTimeout('location.reload(true);', 10);
	};	
	
	instance.controls.newTextBtn.click(function(){
		console.log('test text button click');
		instance.controls.TextField.val('');
		instance.controls.compositTextElem.show();
	});
	
	instance.controls.addText.click(function(){
		instance.addText();
	});
	
	instance.controls.imageField.change(function(e){
		instance.handleFiles(e);
	});
	
	instance.controls.saveSlideBtn.click(function(){
		instance.saveSlide();
	});
	
	instance.controls.saveBtn.click(function(){
		instance.savePresentation();
	});
	
	instance.controls.delBtn.click(function(){
		instance.delSlide();
	});
	
	
	
	instance.controls.newSlideBtn.click(function(){		
				
		console.log('test new Slide');
			
			instance.controls.imageField.replaceWith( instance.controls.imageField = instance.controls.imageField.clone( true ) );
			instance.uid = instance.presentation.slides.length;
			
			instance.temp = new instance.Slide();
			instance.controls.slideMenu.show();
			instance.temp.view =  $(document.createElement('div')).attr('class','presentation-slide').attr('id', "ps"+instance.uid);
			
			instance.controls.newPresetation.append(instance.temp.view);			
			
			instance.addText = function(){
				console.log('test text add');
				var temp = $(document.createElement('p')).text(instance.controls.TextField.val());
				instance.temp.view.append(temp);
				instance.controls.compositTextElem.hide();
			};			
			
			instance.temp.view.click(function(){
				$(this).attr('contenteditable','true');
			});
			
			instance.handleFiles = function (e) {
			    var reader = new FileReader;
			    reader.onload = function(event) {
			        var img = new Image;
			        img.src = event.target.result;
			        img.width = 400;
			        img.onload = function() {
			        	console.log('test image add');
			        	instance.temp.view.append(img);
			        	};
			    };
			    reader.readAsDataURL(e.target.files[0]);
			};			
			
		instance.saveSlide = function(){
				instance.temp.title = instance.controls.slideTitleField.val();
				instance.temp.content = instance.temp.view.html();
				if(instance.presentation.slides[instance.uid]){
					instance.presentation.slides[instance.uid].title = instance.temp.title;
					instance.presentation.slides[instance.uid].content = instance.temp.content;
				}else{
					instance.presentation.slides.push(instance.temp);
					instance.controls.slidesList.append('<button id="sb'+instance.uid+'" class="slides-list-button">'+instance.temp.title+'</button>')
				}				
				instance.temp.view.hide();
				instance.controls.slideMenu.hide();
				instance.controls.slideTitleField.val('');
				setTimeout(chouseSlide(),0);
				function chouseSlide(){					
					$('.slides-list-button').click(function(){
						instance.temp.view.hide();
						var uid = $(this).attr('id').match(/\d+/);
						console.log(uid);
						instance.temp.view = $('#ps'+uid);
						console.log(instance.temp.view);
						instance.controls.slideTitleField.val(instance.presentation.slides[uid].title);
						instance.temp.view.show();
						instance.controls.slideMenu.show();
					});
				};			
			
			instance.delSlide = function(){
				var uid = instance.temp.view.attr('id').match(/\d+/);
				instance.presentation.slides.splice(uid,1);
				instance.temp.view.remove();
				$('#sb'+uid).remove();				
			};
		};
	
});
};


